<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 600px;
			height: 300px;
			position: relative;
			border: 1px solid red;
			margin: 100px;
			overflow: hidden;
		}

		ul {
			width: 500%;
			position: absolute;
			left: 0;
		}

		li {
			width: 600px;
			float: left;
			list-style: none;
			height: 100%;
		}

		img {
			width: 100%;
			height: 100%;
		}
	</style>
	<body>
		<div >
			<ul >
				<li><img src="1.jpg" alt="" /></li>
				<li><img src="2.jpg" alt="" /></li>
				<li><img src="3.jpg" alt="" /></li>
				<li><img src="4.jpg" alt="" /></li>
				<li><img src="5.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
</html>
<script>
	/*
	   思路：  如果可视区显示两张图片，复制第一张第二张图片到所有图片的结尾处
	 * */
	var timer = setInterval(autoPlay, 10);
	var num = 0;
	var box = document.getElementsByTagName("div")[0];
	var ul = document.getElementsByTagName("ul")[0]

	function autoPlay() {
		ul.style.left = num + "px";
		num -= 2;
		if (num <= -2400) {
			num = 0;
		}
	}
	//鼠标移入到容器 停止定时器 
	box.onmouseover = function() {
		clearInterval(timer);
	}
	//鼠标离开启动定时器
	box.onmouseout = function() {
		timer = setInterval(autoPlay, 10);
	}
</script>
